<template>
  <div class="wrapper">
     <swiper :options="swiperOption" ref="mySwiper">
         <swiper-slide v-for="(page,index) in pages" :key="index">
            <div class="icon" v-for="item in page" :key="item.id">
                <div class="icon-img" >
                    <img class="content" :src="item.imgUrl" alt="">
                </div>
                <p class="icon-des">{{item.desc}}</p>
            </div> 
         </swiper-slide>
     </swiper>
  </div>
</template>

<script>
export default {
  components:{},
  props:{
      iconList:Array
  },
  data(){
    return {
      swiperOption:{},
     
    }
  },
  watch:{},
  computed:{
      swiper() {
        return this.$refs.mySwiper.swiper
      },
      pages() {
         const pages = []
         this.iconList.forEach((item,index) => {
             const page = Math.floor(index/8)
             if(!pages[page]){
                 pages[page] = []
             }
             pages[page].push(item)
         })
         return pages
      }
  },
  methods:{},
  created(){},
  mounted(){
      this.swiper.slideTo(0, 1000, false)
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixin.styl'
.wrapper >>> .swiper-container
.wrapper
  margin-top 0.1rem
  height 0
  padding-bottom 51%
  overflow hidden
  .icon
    position relative
    overflow hidden
    float left
    width 25%
    height 0
    padding-bottom 25%
    .icon-img
      position absolute
      left 0
      right 0
      top 0
      box-sizing border-box
      padding 0.1rem 
      bottom 0.44rem
      .content
        height 100%
        display block
        margin 0 auto 
    .icon-des
      position absolute 
      text-align center
      left 0
      right 0
      bottom 0
      height 0.44rem
      line-height 0.44rem
      ellips()
      color $darkTextColor
</style>